﻿@{
    ViewData["Title"] = "缓存管理";
    Layout = "~/Views/Shared/_LayoutWithTree.cshtml";
}

@section Left {
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">缓存列表</li>
        </ul>
        <div class="layui-code-tools">
            <i id="btnReload" class="layui-icon layui-icon-refresh-3"></i>
        </div>
        <div class="layui-tab-content">
            <script id="tplCache" type="text/html">
                <ul>
                {{#  layui.each(d, function(index, item){ }}
                    <li class="layui-padding-2" data-id="{{= item }}">
                        <a href="javascript:">{{= item }}</a></li>
                {{#  }); }}
                </ul>
            </script>
            <div id="Cache"></div>
        </div>       
    </div>
}
@section Main {
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title">
            <li class="layui-this">缓存数据【<span id="key"></span>】</li>
        </ul>
        <div class="layui-code-tools">
            <button id="btnClear" type="button" class="layui-btn layui-bg-red layui-btn-sm">
                <i class="layui-icon layui-icon-delete"></i>
                清空缓存</button>
        </div>
        <div class="layui-tab-content layui-padding-2">
            <div id="result" style="height:calc(100vh - 80px)"></div>
        </div>       
    </div>
}

@section Scripts {
    <script src="/component/libs/ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var editor = ace.edit("result");
        editor.session.setMode("ace/mode/json");
        //
        var app = {};
        layui.use(['http'], function () {
            var $ = layui.jquery,
                laytpl = layui.laytpl,
                http = layui.http;

            app.load = function () {
                http.get('/api/sysCache/keyList').then((res) => {
                    var tpl = $('#tplCache').html();
                    laytpl(tpl).render(res.result, function (str) {
                        $('#Cache').html(str);
                        //
                        $('#Cache ul li').on('click', function () {
                            $(this).addClass('layui-bg-blue');
                            $(this).siblings().removeClass('layui-bg-blue');
                            var key = $(this).attr('data-id');
                            var url = '/api/sysCache/value/' + key;
                            http.get(url).then((res2) => {
                                $('#key').html(key);
                                //$('#result').html(JSON.stringify(res2.result, null, 2));
                                editor.setValue(JSON.stringify(res2.result, null, 2));
                                editor.gotoLine(1);
                            });
                        });
                    });
                });
            }            
            app.clear = function () {
                var index = layer.confirm('您确定要清除当前缓存吗？', function () {
                    var url = '/api/sysCache/delete/' + $('#key').html();;
                    http.post(url).then((res2) => {
                        editor.setValue('');
                        layer.close(index);
                    });
                })
            }
            app.init = function () {
                app.load();
                $('#btnReload').on('click', app.load);
                $('#btnClear').on('click', app.clear);
            }();
        });
    </script>
}
